<template>
  <div class="content">
    <div class="row">
      <div class="col-md-12">
        <div class="box">
          <el-form :inline="true" :model="listQuery" class="demo-form-inline" label-width="75px">
            <el-form-item label="权益名称" prop="equityName">
              <el-input v-model.trim="listQuery.equityName" placeholder="请输入权益名称" clearable style="width: 200px;"></el-input>
            </el-form-item>
            <el-form-item label="权益类型" prop="equityType">
              <el-select v-model="listQuery.equityType" placeholder="请选择权益类型" clearable @change="changeEquityType">
                <el-option v-for="item in gradeOptions" :key="item.value" :label="item.label" :value="item.value" />
              </el-select>
            </el-form-item>
            <el-form-item label="权益级别" prop="equityLevelID">
              <el-select v-model="listQuery.equityLevelID" placeholder="请选择权益级别" clearable>
                <el-option v-for="item in equityTypeList" :key="item.equityLevelID" :label="item.equityLevelName" :value="item.equityLevelID" />
              </el-select>
            </el-form-item>
            <el-form-item label="服务名称" prop="servceName">
              <el-input v-model.trim="listQuery.servceName" placeholder="请输入权益名称" clearable style="width: 200px;"></el-input>
            </el-form-item>
            <el-form-item>
                <button class="btn btn-default" type="button" @click="handleFilter">查询</button>
                <button class="btn btn-lg bg-green" type="button" @click="handleAdd"><i class="entypo-pencil"></i>添加</button>
            </el-form-item>
          </el-form>
          <div class="box-body">
            <div class="table-responsive">
              <el-table
                :key="tableKey"
                v-loading="listLoading"
                :data="list"
                border
                fit
                stripe
                highlight-current-row
                style="width: 100%;"
              >
                <el-table-column
                  label="权益名称"
                  prop="equityName"
                  align="left"
                  min-width="80">
                </el-table-column>
                <el-table-column
                  label="权益类型"
                  prop="equityType"
                  align="left"
                  width="100">
                  <template slot-scope="scope">
                    <span>{{ scope.row.equityType == 1 ? '保单权益' : '客户权益' }}</span>
                  </template>
                </el-table-column>
                <el-table-column
                  label="权益备注"
                  prop="remark"
                  align="left"
                  min-width="120">
                </el-table-column>
                <el-table-column
                  label="权益状态"
                  prop="equityStatus"
                  align="left"
                  width="100">
                  <template slot-scope="scope">
                    <span>{{ scope.row.equityStatus == 0 ? '正常' : '暂停' }}</span>
                  </template>
                </el-table-column>
                <el-table-column
                  label="创建时间"
                  prop="createTime"
                  align="left"
                  width="180">
                </el-table-column>
                <el-table-column
                  label="操作"
                  align="left"
                  class-name="small-padding fixed-width"
                  width="110">
                  <template slot-scope="{row}">
                    <el-button class="btn1" type="text" @click="editBizRi(row)">修改</el-button>
                    <el-button class="btn1" type="text" @click="deleteBizRi(row)">删除</el-button>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </div>
          <div class="box-footer clearfix">
            <!-- 控制分页模块 -->
            <pagination align="right" v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getList" />
          </div>
        </div>
      </div>
    </div>
    <!-- 添加权益 -->
    <el-dialog
      :visible.sync="addRightsFormVisible"
      v-if="addRightsFormVisible"
      :before-close="handleCloseRights"
      :close-on-click-modal="false"
      :show-close="false"
      :append-to-body="true"
      style="margin-top: -5vh;"
      >
      <div class="modal-header bg-white">
        <h4 id="myLargeModalLabel" class="modal-title">
          <span class="profile-rounded"><i class="fontello-wrench-outline"></i>
          </span>&nbsp;&nbsp; 添加权益
        </h4>
      </div>
      <el-form :model="rightsListQuery" :rules="rules" ref="addRightsFormVisible" class="clearfix modal-body">
        <el-form-item style="flex-shrink: 0;" label="" prop="equityName">
          <el-input
            v-model="rightsListQuery.equityName"
            :maxlength="200"
            placeholder="权益名称"
            class="filter-item fl" />
        </el-form-item>
        <el-form-item style="flex-shrink: 0;" label="" prop="equityType">
          <el-select v-model="rightsListQuery.equityType" placeholder="权益类型">
            <el-option v-for="item in gradeOptions" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>
        <el-form-item style="flex-shrink: 0;" label="" prop="remark">
          <el-input
            v-model="rightsListQuery.remark"
            :maxlength="200"
            placeholder="权益备注"
            class="filter-item fl" />
        </el-form-item>
        <el-form-item style="flex-shrink: 0;" label="" prop="equityStatus">
          <el-select v-model="rightsListQuery.equityStatus" placeholder="状态">
            <el-option v-for="item in typeOptions" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>
        <div class="attribute-operation clearfix fr">
          <el-button
            type="primary"
            @click="handleAddEquity('addRightsFormVisible')">
            下一步
          </el-button>
          <el-button
            @click="close()">
            关闭
          </el-button>
        </div>
      </el-form>
    </el-dialog>
    <!-- /添加权益 -->
    <!-- 添加等级 -->
    <el-dialog
      :visible.sync="addGradeFormVisible"
      :before-close="handleCloseRights"
      v-if="addGradeFormVisible"
      :close-on-click-modal="false"
      :append-to-body="true"
      :show-close="false"
      style="margin-top: -5vh;"
      >
      <div class="modal-header bg-white">
        <h4 id="myLargeModalLabel" class="modal-title">
          <span class="profile-rounded"><i class="fontello-wrench-outline"></i>
          </span>&nbsp;&nbsp; 添加等级
        </h4>
      </div>
      <div class="box-body clearfix">
        <div class="attribute-operation clearfix">
          <el-button
            type="text"
            @click="AddGrade()">
            添加
          </el-button>
        </div>
        <div class="table-responsive">
          <el-form
            :model="rightsListQuery"
            :rules="rightsListQueryRules"
            ref="rightsListQueryForm"
            class="demo-ruleForm"
          >
            <el-table
              :key="tableKey"
              :data="rightsListQuery.equityLevelDef"
              :show-header="false"
              style="width: 100%;"
            >
              <el-table-column
                width="100"
                align="left">
                <template slot-scope="scope">
                  <el-form-item :prop="'equityLevelDef.' + scope.$index + '.equityLevel'" :rules="rightsListQueryRules.equityLevel">
                    <el-input
                      v-model.number="scope.row.equityLevel"
                      :maxlength="200"
                      placeholder="排序"
                      class="filter-item fl" />
                  </el-form-item>
                </template>
              </el-table-column>
              <el-table-column
                width="250"
                align="left">
                <template slot-scope="scope">
                  <el-form-item :prop="'equityLevelDef.' + scope.$index + '.equityLevelName'" :rules="rightsListQueryRules.equityLevelName">
                    <el-input
                      v-model="scope.row.equityLevelName"
                      :maxlength="10"
                      placeholder="等级名称"
                      class="filter-item fl" />
                  </el-form-item>
                </template>
              </el-table-column>
              <el-table-column
                width="500"
                align="left">
                <template slot-scope="scope">
                  <el-form-item>
                    <el-input
                      v-model="scope.row.equityLevelRemarks"
                      :maxlength="200"
                      placeholder="描述"
                      style="width: 100%;"
                      class="filter-item fl" />
                  </el-form-item>
                </template>
              </el-table-column>
              <el-table-column
                width="50"
                align="left">
                <template slot-scope="scope">
                  <el-form-item>
                    <el-button
                      type="text"
                      @click="deleteGrade(scope.row, scope.$index)">
                      删除
                    </el-button>
                  </el-form-item>
                </template>
              </el-table-column>
            </el-table>
          </el-form>
        </div>
        <div class="attribute-operation clearfix fr">
          <el-button
            type="primary"
            @click="handleAdd1()">
            上一步
          </el-button>
          <el-button
            type="primary"
            @click="handleAddService('rightsListQueryForm')">
            下一步
          </el-button>
          <el-button
            @click="close">
            关闭
          </el-button>
        </div>
      </div>
    </el-dialog>
    <!-- /添加等级 -->
    <!-- 添加服务 -->
    <el-dialog
      :visible.sync="addServiceFormVisible"
      :before-close="handleCloseRights"
      :close-on-click-modal="false"
      :show-close="false"
      :append-to-body="true"
      width="80%"
      style="margin-top: -5vh;text-align: right;"
      >
      <el-form :inline="true" :model="servicelistQuery" class="demo-form-inline" @submit.native.prevent>
        <el-form-item label="服务名称" prop="name">
          <el-input v-model="servicelistQuery.serviceName" @keyup.enter.native="handlePageService" placeholder="请输入服务名称"></el-input>
        </el-form-item>
        <el-form-item>
            <button class="btn btn-default" type="button" @click="handlePageService">查询</button>
        </el-form-item>
      </el-form>
      <div class="box-body clearfix">
        <div class="table-responsive">
          <el-table
            :key="tableKey"
            v-loading="listLoading1"
            :data="ServiceList"
            :cell-style="changeCellStyle"
            :header-cell-style="headerRowClassName"
            fit
            highlight-current-row
            style="width: 100%;"
          >
            <el-table-column
              label="项目名称"
              prop="serviceName"
              align="left">
            </el-table-column>
            <el-table-column
              label="项目内容简介"
              prop="serviceIntr"
              align="left">
            </el-table-column>
            <el-table-column
              label="使用流程"
              prop="serviceProcess"
              align="left">
            </el-table-column>
            <el-table-column
              label="使用通道"
              prop="serviceChannel"
              align="left">
            </el-table-column>
            <el-table-column
              v-for="item in rightsListQuery.equityLevelDef"
              :key="item.equityLevel"
              :label="item.equityLevelName"
              :prop="item.equityLevelName"
              align="left">
              <template slot-scope="scope">
                <el-checkbox @change="serviceChange(scope.row, item)" />
              </template>
            </el-table-column>

          </el-table>
        </div>
        <div class="attribute-operation clearfix fr">
          <el-button
            type="primary"
            @click="handleAddGrade()">
            上一步
          </el-button>
          <el-button
            type="primary"
            @click="saveaddRights()">
            保存
          </el-button>
          <el-button
            @click="close">
            关闭
          </el-button>
        </div>
      </div>
    </el-dialog>
    <!-- /添加服务 -->
    <!-- 修改 -->
    <el-dialog
      :visible.sync="editRightsFormVisible"
      v-if="editRightsFormVisible"
      :before-close="handleCloseRights"
      :close-on-click-modal="false"
      :show-close="false"
      :append-to-body="true"
      width="80%"
      style="margin-top: -5vh;"
      >
      <el-form :model="edit_CS" :rules="rules1" ref="editRightsFormVisible" class="clearfix box-body">
        <el-form-item style="flex-shrink: 0;" label="" prop="equityName">
          <el-input
            v-model="edit_CS.equityName"
            :maxlength="200"
            placeholder="权益名称"
            class="filter-item fl" />
        </el-form-item>
        <el-form-item style="flex-shrink: 0;" label="" prop="equityType">
          <el-select v-model="edit_CS.equityType" placeholder="权益类型">
            <el-option v-for="item in gradeOptions" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>
        <el-form-item style="flex-shrink: 0;" label="" prop="name">
          <el-input
            v-model="edit_CS.remark"
            :maxlength="200"
            placeholder="权益备注"
            class="filter-item fl" />
        </el-form-item>
        <el-form-item style="flex-shrink: 0;" label="" prop="name">
          <el-select v-model="edit_CS.equityStatus" placeholder="状态">
            <el-option v-for="item in typeOptions" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>
        <div class="btn-wrap clearfix fr">
          <el-button
            type="primary"
            @click="editSaveaddRights('editRightsFormVisible')">
            保存
          </el-button>
        </div>
      </el-form>
      <el-divider></el-divider>
      <div class="box-body edit-grade-list clearfix">
        <div class="attribute-operation2 fr clearfix">
          <el-button
            type="text"
            @click="AddGrade2()">
            添加等级
          </el-button>
        </div>
        <div class="table-responsive">
          <el-form
            :model="edit_CS"
            :rules="edit_CS_Rules"
            ref="editCSForm"
          >
            <el-table
              :key="tableKey"
              :data="edit_CS.equityLevelDef"
              :show-header="false"
              style="width: 100%;"
            >
              <el-table-column
                prop="equityLevel"
                min-width="8%"
                align="left">
                <template slot-scope="scope">
                  <el-form-item :prop="'equityLevelDef.' + scope.$index + '.equityLevel'" :rules="edit_CS_Rules.equityLevel">
                    <el-input
                      v-model.number="scope.row.equityLevel"
                      :maxlength="200"
                      placeholder="排序"
                      class="filter-item fl" />
                  </el-form-item>
                </template>
              </el-table-column>
              <el-table-column
                prop="equityLevelName"
                min-width="20%"
                align="left">
                <template slot-scope="scope">
                  <el-form-item :prop="'equityLevelDef.' + scope.$index + '.equityLevelName'" :rules="edit_CS_Rules.equityLevelName">
                    <el-input
                      v-model.trim="scope.row.equityLevelName"
                      :maxlength="10"
                      placeholder="等级名称"
                      class="filter-item fl" />
                  </el-form-item>
                </template>
              </el-table-column>
              <el-table-column
                prop="equityLevelRemarks"
                min-width="65%"
                align="left">
                <template slot-scope="scope">
                  <el-form-item>
                    <el-input
                      v-model.trim="scope.row.equityLevelRemarks"
                      :maxlength="200"
                      placeholder="描述"
                      class="filter-item fl" />
                  </el-form-item>
                </template>
              </el-table-column>
              <el-table-column
                min-width="7%"
                align="left">
                <template slot-scope="scope">
                  <el-form-item>
                    <el-button
                      type="text"
                      @click="saveAddGrade(scope.row, 'editCSForm')">
                      保存
                    </el-button>
                    <el-button
                      type="text"
                      @click="deleteAddGrade(scope.row, scope.$index)">
                      删除
                    </el-button>
                  </el-form-item>
                </template>
              </el-table-column>
            </el-table>
          </el-form>
        </div>
      </div>
      <el-divider></el-divider>
      <el-form :inline="true" :model="servicelistQuery2" class="demo-form-inline fr" @submit.native.prevent>
        <el-form-item label="服务名称" prop="name">
          <el-input v-model="servicelistQuery2.serviceName" @keyup.enter.native="handlePageService2" placeholder="请输入服务名称"></el-input>
        </el-form-item>
        <el-form-item>
            <button class="btn btn-default" type="button" @click="handlePageService2">查询</button>
        </el-form-item>
      </el-form>
      <div class="box-body clearfix">
        <div class="table-responsive">
          <el-table
            :key="tableKey"
            v-loading="listLoading1"
            :data="ServiceList"
            :cell-style="changeCellStyle"
            :header-cell-style="headerRowClassName"
            fit
            highlight-current-row
            style="width: 100%;"
          >
            <el-table-column
              label="项目名称"
              prop="serviceName"
              align="left">
            </el-table-column>
            <el-table-column
              label="项目内容简介"
              prop="serviceDefDomain.serviceIntr"
              align="left">
              <template slot-scope="scope">
                <span v-if="scope.row.serviceDefDomain&&scope.row.serviceDefDomain.serviceIntr">{{scope.row.serviceDefDomain.serviceIntr}}</span>
                <span v-else>{{scope.row.serviceIntr}}</span>
              </template>
            </el-table-column>
            <el-table-column
              label="使用流程"
              prop="serviceDefDomain.serviceProcess"
              align="left">
              <template slot-scope="scope">
                <span v-if="scope.row.serviceDefDomain&&scope.row.serviceDefDomain.serviceProcess">{{scope.row.serviceDefDomain.serviceProcess}}</span>
                <span v-else>{{scope.row.serviceProcess}}</span>
              </template>
            </el-table-column>
            <el-table-column
              label="使用通道"
              prop="serviceDefDomain.serviceChannel"
              align="left">
              <template slot-scope="scope">
                <span v-if="scope.row.serviceDefDomain&&scope.row.serviceDefDomain.serviceChannel">{{scope.row.serviceDefDomain.serviceChannel}}</span>
                <span v-else>{{scope.row.serviceChannel}}</span>
              </template>
            </el-table-column>
            <el-table-column
              v-for="(item, index) in equityList"
              :key="item.equityLevel"
              :label="item.equityLevelName"
              align="left">
              <template slot-scope="scope">
                <div v-if="scope.row.grade[index].equityLevelName == item.equityLevelName">
                  <el-checkbox v-if="showCheckBox" v-model="scope.row.grade[index].checked" @change="serviceChange2(scope.row, item, index)" />
                </div>
              </template>
            </el-table-column>

          </el-table>
        </div>
        <div class="attribute-operation clearfix fr">
          <el-button
            @click="close">
            关闭
          </el-button>
        </div>
      </div>
    </el-dialog>
    <!-- /修改 -->
  </div>
</template>

<script>
import { getPageEquity, saveEquity, updateEquity, getEquityByID, getEquityLevel, deleteEquity, deleteEquityLevel, updateEquityLevel, deleteLevelService, saveEquityLevel, saveLevelService } from '@/api/rightsManagement'
import Pagination from '@/components/Pagination' // secondary package based on el-pagination
import { getService } from '@/api/supplierManagement/project'

export default {
  name: 'bizRi',
  components: { Pagination },
  data() {
    return {
      equityTypeList: null, // 权益级别
      tableKey: 0,
      showCheckBox: true,
      showCheckBox1: true,
      list: null,
      // edit_CS:{},
      edit_CS: {
        "equityID":"9617B127150443639123674D0046B65C",
        "equityName":"wlm权益1",
        "equityType":1,
        "equityStatus":0,
        "remark":"wlm权益1",
        "createTime":"2020-11-30 18:57:11",
        "updateTime":null,
        "equityLevelDef":[
          {
            "equityLevelID":"C0557488107E4309A7BD6BC411C92057",
            "equityID":"9617B127150443639123674D0046B65C",
            "equityName":"wlm权益1",
            "equityType":1,
            "equityLevel":1,
            "equityLevelName":"哈哈哈",
            "equityLevelRemarks":"wlm权益1",
            "serviceLevelDef":[
              {
                  "equityID":null,
                  "equityLevelID":"C0557488107E4309A7BD6BC411C92057",
                  "serviceID":"003327E2BEA146CE8E69A19AE02A6CF3",
                  "serviceName":"爬山",
                  "serviceDefDomain":{
                    "serviceID":"003327E2BEA146CE8E69A19AE02A6CF3",
                      "serviceName":"爬山",
                      "serviceIntr":"爬山爬山",
                      "serviceProcess":"爬山爬山爬山",
                      "serviceChannel":"爬山爬山爬山爬山",
                      "serviceStatus":0,
                      "supplierID":"2897B4038AC04D949A6F6561113D1F28",
                      "supplierName":"供应商名称4",
                      "totalNumber":-321325,
                      "createTime":"2020-11-25 08:18:29",
                      "updateTime":"2020-11-30 18:54:16",
                      "termOfValidity":null
                  },
                  "uuid":"FE1A391EC9D14AF1A2FBF8A342575C1F"
              }
            ]
          },
          {
            "equityLevelID":"D607D98A3C854D988A73F12A113CB81F",
            "equityID":"9617B127150443639123674D0046B65C",
            "equityName":null,
            "equityType":1,
            "equityLevel":0,
            "equityLevelName":"嘻嘻嘻",
            "equityLevelRemarks":"wlm权益122313",
            "serviceLevelDef":[
              {
                  "equityID":null,
                  "equityLevelID":"D607D98A3C854D988A73F12A113CB81F",
                  "serviceID":"22222222222222222222222453",
                  "serviceName":"打篮球",
                  "serviceDefDomain":{
                    "serviceID":"22222222222222222222222453",
                      "serviceName":"打篮球",
                      "serviceIntr":"打篮球",
                      "serviceProcess":"打篮球",
                      "serviceChannel":"打篮球",
                      "serviceStatus":0,
                      "supplierID":"2897B4038AC04D949A6F6561113D1F28",
                      "supplierName":"供应商名称4",
                      "totalNumber":-321325,
                      "createTime":"2020-11-25 08:18:29",
                      "updateTime":"2020-11-30 18:54:16",
                      "termOfValidity":null
                  },
                  "uuid":"FE1A391EC9D14AF1A2FBF8A342575C1F"
              }
            ]
          }
        ]
      },
      edit_CS_Rules: {
        equityLevel: [
          { required: true, message: "请输入排序", trigger: "change" },
          { type: 'number', message: '必须为数字值'}
        ],
        equityLevelName: [
          { required: true, message: '请输入等级名称', trigger: 'blur' }
        ]
      },
      rules1: {
        equityName: [
          { required: true, message: '请输入权益名称', trigger: 'blur' }
        ],
        equityType: [
          { required: true, message: '请选择权益类型', trigger: 'blur' }
        ]
      },
      equityList: [],
      serviceData: [],
      ServiceList: [],
      total: 0,
      ServiceTotal: null,
      listLoading: false,
      listLoading1: false,
      listQuery: {
        equityName: null, // 权益名称
        equityType: null, // 权益类型
        equityLevelID: null, // 权益级别ID
        servceName: null, // 服务名称
        pageNum: 1,
        pageSize: 20
      },
      servicelistQuery: {
        serviceName: null // 服务项目名称
      },
      servicelistQuery2: {
        serviceName: null // 服务项目名称
      },
      rightsListQuery: { // 添加权益
        equityName: null, // 权益名称
        equityType: null, // 权益类型 1:保单权益 2:客户权益
        equityStatus: null, // 权益状态
        remark: null, // 备注
        equityLevelDef: [ // 添加等级
          {
            equityLevelName: null, // 权益等级名称
            equityLevel: 0,
            equityLevelRemarks: null, // 权益等级备注
            serviceLevelDef: []
          }
        ]
      },
      rightsListQueryRules: {
        equityLevel: [
          { required: true, message: "请输入排序", trigger: "change" },
          { type: 'number', message: '必须为数字值'}
        ],
        equityLevelName: [
          { required: true, message: '请输入等级名称', trigger: 'blur' }
        ]
      },
      rules: {
        equityName: [
          { required: true, message: '请输入权益名称', trigger: 'blur' }
        ],
        equityType: [
          { required: true, message: '请选择权益类型', trigger: 'blur' }
        ]
      },
      addRightsFormVisible: false,
      addGradeFormVisible: false,
      addServiceFormVisible: false,
      editRightsFormVisible: true,
      innerVisible: false,
      gradeOptions: [
        {
          label: '保单权益',
          value: 1
        },
        {
          label: '客户权益',
          value: 2
        }
      ],
      typeOptions: [ // 状态
        {
          label: '正常',
          value: 0
        },
        {
          label: '停止服务',
          value: 1
        }
      ]
    }
  },
  created() {
    this.getList()
    this.getEquityLevel()

    let arr = []
    let newArr = [];
    if (this.edit_CS&&this.edit_CS.equityLevelDef) {
      this.edit_CS.equityLevelDef.sort((a, b) => {
        return (a['equityLevel'])-(b['equityLevel'])   // grapheme为字母对应的属性名
      })
      this.equityList = JSON.parse(JSON.stringify(this.edit_CS.equityLevelDef))
    }
    this.edit_CS.equityLevelDef.forEach((item) => {
      let obj = {
        equityLevelName: item.equityLevelName,
        equityLevelID: item.equityLevelID,
        equityLevel: item.equityLevel,
        checked: false
      }
      item.serviceLevelDef.forEach((item2) => {
        obj.checked = true
        item2['grade'] = [obj]
        item2['obj'] = obj
        arr.push(item2)
      })
    })
    arr.forEach(el=>{
      const result = newArr.findIndex(ol=>{return el.serviceID === ol.serviceID})
      if(result!== -1){
        newArr[result].grade.push(el.obj)
      }else{
        newArr.push(el)
      } 
    })
    
    newArr.forEach(item3 => {
      let wrapLen = this.edit_CS.equityLevelDef.length
      let itemLen = item3.grade.length
      if (itemLen !== wrapLen) {
        for (let i = 0;i < this.edit_CS.equityLevelDef.length;i++) {
          for (let j = 0;j < item3.grade.length;j++) {
            if (this.edit_CS.equityLevelDef[i].equityLevelID == item3.grade[j].equityLevelID) {
              break;
            }else{
              let obj = {
                equityLevelName: this.edit_CS.equityLevelDef[i].equityLevelName,
                equityLevelID: this.edit_CS.equityLevelDef[i].equityLevelID,
                equityLevel: this.edit_CS.equityLevelDef[i].equityLevel,
                checked: false
              }
              item3.grade.push(obj)
            }
          }
        }
      }
      item3.grade.sort((a, b) => {
        return (a['equityLevel'])-(b['equityLevel'])
      })
    })
    this.ServiceList = newArr
    this.serviceData = newArr
  },
  methods: {
    getList() {
      this.listLoading = true
      getPageEquity(this.listQuery).then(response => {
        this.list = response.content
        this.total = response.totalElements
        this.listLoading = false
      }).catch(() => {
        this.listLoading = false
      })
    },
    changeEquityType(val) {
      if (val) {
        this.listQuery.equityType = val
      }else{
        this.listQuery.equityType = null
      }
    },
    // 权益级别
    getEquityLevel() {
      let params = {
        equityName: this.listQuery.equityName,
        equityType: this.listQuery.equityType
      }
      getEquityLevel(params).then(response => {
        this.equityTypeList = response
      })
    },
    reset() {
      this.listQuery = {
        equityName: null, // 权益名称
        equityType: null, // 权益类型
        equityLevelID: null, // 权益级别ID
        servceName: null, // 服务名称
        pageNum: 1,
        pageSize: 20
      }
    },
    // 普通检索
    handleFilter () {
      this.listQuery.pageNum = 1
      this.getList()
      this.getEquityLevel()
    },
    // 服务项目
    getPageService() {
      this.listLoading1 = true
      this.ServiceList = []
      this.serviceData = []
      getService(this.servicelistQuery).then(response => {
        const that = this
        response.forEach(function(item) {
          item.equityLevelDef = that.rightsListQuery.equityLevelDef
        })
        this.ServiceList = this.serviceData.concat(response)
        this.ServiceTotal = response.totalElements
        this.rightsListQuery.equityLevelDef.forEach(itemI => {
          itemI.serviceLevelDef = []
        })
        this.listLoading1 = false
      }).catch(() => {
        this.listLoading1 = false
      })
    },
    getPageService2() {
      this.listLoading1 = true
      this.ServiceList = []
      let arr = []
      let grade = []
      let obj = {}
      getService(this.servicelistQuery2).then(response => {
        if (response&&response.length>0) {
          if (this.serviceData.length>0) {
            for (var i = 0; i < response.length; i++) {
              for (var j = 0; j < this.serviceData.length; j++) {
                if (response[i].serviceID == this.serviceData[j].serviceID) {
                  response[i] = "";
                  break;
                }
              }
            }
            for (var i = 0; i < response.length; i++) {
              if (response[i] != "") {
                console.log(response)
                // response[i].checked = false
                arr.push(response[i])
              }
            }
          }else{
            response.forEach(item=>{
              obj = {
                serviceID: item.serviceID,
                serviceName: item.serviceName,
                serviceIntr: item.serviceIntr,
                serviceProcess: item.serviceProcess,
                serviceChannel: item.serviceChannel
              }
              arr.push(obj)
            })
          }
        }else{
          arr = []
        }
        this.edit_CS.equityLevelDef.forEach((itemI) => {
          let obj = {
            name: itemI.equityLevelName,
            id: itemI.equityLevelID,
            checked: false
          }
          grade.push(obj)
        })
        arr.forEach(itemII => {
          itemII['grade'] = grade
        })
        this.ServiceList = this.serviceData.concat(arr)
        this.listLoading1 = false
      }).catch(() => {
        this.listLoading1 = false
      })
    },
    // 查询服务
    handlePageService() {
      this.getPageService()
    },
    handlePageService2() {
      this.getPageService2()
    },
    // 选择权限等级
    serviceChange(row, serviceitem) {
      const that = this
      let arr = []
      this.rightsListQuery.equityLevelDef.forEach(function(item, index) {
        if (item.equityLevel === serviceitem.equityLevel) {
          if (event.target.checked === true) {
            that.rightsListQuery.equityLevelDef[index].serviceLevelDef.push(
              {
                serviceID: row.serviceID, // 服务项目ID
                serviceName: row.serviceName // 服务项目名称
              }
            )
            that.serviceData.push(row)
          } else {
            that.rightsListQuery.equityLevelDef[index].serviceLevelDef.forEach(function(sItem, sIndex) {
              if (sItem.serviceID === row.serviceID) {
                that.rightsListQuery.equityLevelDef[index].serviceLevelDef.splice(sIndex, 1)
              }
            })
            that.serviceData.forEach(function(sItem, sIndex) {
              if (sItem.serviceID === row.serviceID) {
                that.serviceData.splice(sIndex, 1)
              }
            })
          }
        }
      })
    },
    serviceChange2(row, serviceitem, index) {
      this.showCheckBox = false
      console.log(row.grade[index], serviceitem, 2)
      if (!row.grade[index].checked) {
        let params = {
          equityID: serviceitem.equityID,
          equityLevelID: serviceitem.equityLevelID,
          serviceID: row.serviceID
        }
        deleteLevelService(params).then(res=>{
          if (res.status == 'FALSE') {
            this.msgWarn(res.content)
            this.$set(row.grade[index], 'checked', true)
            this.showCheckBox = true
            // this.editBizRi(serviceitem)
          }else if (res.status == 'SUCCESS') {
            this.msgSuccess('修改成功')
            this.$set(row.grade[index], 'checked', false)
            this.showCheckBox = true
            // this.editBizRi(serviceitem)
          }
        })
      }else{
        let params = {
          equityID: serviceitem.equityID,
          equityLevelID: serviceitem.equityLevelID,
          equityLevelName: serviceitem.equityLevelName,
          serviceID: row.serviceID,
          serviceName: row.serviceName
        }
        saveLevelService(params).then(res=>{
          if (res.status == 'SUCCESS') {
            this.msgSuccess('添加成功')
            this.$set(row.grade[index], 'checked', true)
            this.showCheckBox = true
            // this.editBizRi(serviceitem)
          }
        })
      }
    },
    serviceChange3(row, serviceitem) {
      let params = {
        equityID: serviceitem.equityID,
        equityLevelID: serviceitem.equityLevelID,
        equityLevelName: serviceitem.equityLevelName,
        serviceID: row.serviceID,
        serviceName: row.serviceName
      }
      saveLevelService(params).then(res=>{
        if (res.status == 'SUCCESS') {
          this.msgSuccess('添加成功')
          this.editBizRi(serviceitem)
        }
      })
    },
    // 服务table样式
    headerRowClassName(row, column, rowIndex, columnIndex) {
      if (row.columnIndex === 0) {
        return 'background: #eaeaec;color: #888888;'
      } else if (row.columnIndex === 1) {
        return 'background: #3E739D;color: #ffffff;'
      } else if (row.columnIndex === 2) {
        return 'background: #0090D9;color: #ffffff;'
      } else if (row.columnIndex === 3) {
        return 'background: #37A8AF;color: #ffffff;'
      } else if (row.columnIndex > 3) {
        return 'background: #f56954;color: #ffffff;'
      }
    },
    changeCellStyle({row, column, rowIndex, columnIndex}) {
      if (columnIndex === 0) {
        return 'background: #eaeaec;color: #888888;'
      } else if (columnIndex === 1) {
        return 'color: #3E739D;'
      } else if (columnIndex === 2) {
        return 'color: #0090D9;'
      } else if (columnIndex === 3) {
        return 'color: #37A8AF;'
      }
    },
    // 添加
    handleAdd() {
      this.addRightsFormVisible = true
      this.addGradeFormVisible = false
      this.addServiceFormVisible = false
      this.servicelistQuery.serviceName = null
      this.ServiceList = []
      this.serviceData = []
      this.rightsListQuery = { // 添加权益
        equityName: null, // 权益名称
        equityType: null, // 权益类型 1:保单权益 2:客户权益
        equityStatus: null, // 权益状态
        remark: null, // 备注
        equityLevelDef: [ // 添加等级
          {
            equityLevelName: null, // 权益等级名称
            equityLevelRemarks: null, // 权益等级备注
            equityLevel: 0,
            serviceLevelDef: []
          }
        ]
      }
    },
    handleAdd1() {
      this.addRightsFormVisible = true
      this.addGradeFormVisible = false
      this.addServiceFormVisible = false
    },
    // 权益下一步
    handleAddEquity(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.addRightsFormVisible = false
          this.addGradeFormVisible = true
          this.addServiceFormVisible = false
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    // 添加等级
    handleAddGrade() {
      this.addRightsFormVisible = false
      this.addGradeFormVisible = true
      this.addServiceFormVisible = false
    },
    // 添加等级条数
    AddGrade() {
      let len =this.rightsListQuery.equityLevelDef[this.rightsListQuery.equityLevelDef.length-1].equityLevel
      len+=1
      let obj = {
        equityLevelName: null, // 权益等级名称
        equityLevelRemarks: null, // 权益等级备注
        equityLevel: len,
        serviceLevelDef: []
      }
      this.rightsListQuery.equityLevelDef.push(obj)
    },
    AddGrade2() {
      let len =this.edit_CS.equityLevelDef[this.edit_CS.equityLevelDef.length-1].equityLevel
      len+=1
      let obj = {
        equityLevelName: null, // 权益等级名称
        equityLevelRemarks: null, // 权益等级备注
        equityLevel: len,
        serviceLevelDef: []
      }
      this.edit_CS.equityLevelDef.push(obj)
    },
    // 删除等级条数
    deleteGrade(row, index) {
      if (row.serviceLevelDef.length != 0) {
        this.$confirm('内含有已配服务，确定删除?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
          .then(() => {
            this.rightsListQuery.equityLevelDef.splice(index, 1)
          })
          .catch(() => void 0)
      } else {
        this.rightsListQuery.equityLevelDef.splice(index, 1)
      }
    },
    // 保存等级
    saveAddGrade(row, formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let params = {
            equityLevel: row.equityLevel,
            equityLevelName: row.equityLevelName,
            equityLevelRemarks: row.equityLevelRemarks,
          }
          if (row.equityLevelID) {
            params['equityLevelID'] = row.equityLevelID
            // 更新权益
            updateEquityLevel(params).then(res=>{
              if (res.status == 'SUCCESS') {
                this.msgSuccess('修改成功')
                this.editBizRi(this.edit_CS)
              }
            })
          }else{
            params['equityID'] = this.edit_CS.equityID
            params['equityType'] = this.edit_CS.equityType
            // 新增权益
            saveEquityLevel(params).then(res=>{
              if (res.status == 'SUCCESS') {
                this.msgSuccess('添加成功')
                this.editBizRi(this.edit_CS)
              }
            })
          }
        } else {
          return false;
        }
      });
    },
    // 删除等级
    deleteAddGrade(row, index) {
      this.$confirm('确定删除?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
          .then(() => {
            if (row.equityLevelID) {
              let params = {
                equityID: row.equityID,
                equityLevelID: row.equityLevelID
              }
              deleteEquityLevel(params).then(response => {
                if (response.status == 'FALSE') {
                  this.msgWarn(response.content)
                }else if (response.status == 'SUCCESS') {
                  this.msgSuccess('删除成功')
                  this.editBizRi(this.edit_CS)
                }
              })
            }else{
              this.edit_CS.equityLevelDef.splice(index, 1)
            }
          })
          .catch(() => void 0)
    },
    // 添加服务
    handleAddService(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.addRightsFormVisible = false
          this.addGradeFormVisible = false
          this.addServiceFormVisible = true
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    // 保存添加
    saveaddRights() {
      saveEquity(this.rightsListQuery).then(response => {
        this.rightsListQuery.equityName = null
        this.rightsListQuery.equityType = null
        this.rightsListQuery.equityStatus = null
        this.rightsListQuery.remark = null
        this.rightsListQuery.equityLevelDef = [
          {
            equityLevelName: null,
            equityLevelRemarks: null,
            equityLevel: 0,
            serviceLevelDef: []
          }
        ]
      })
      this.handleCloseRights()
    },
    // 修改权益
    editSaveaddRights(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let params = {
            equityID: this.edit_CS.equityID,
            equityName: this.edit_CS.equityName,
            equityType: this.edit_CS.equityType,
            equityStatus: this.edit_CS.equityStatus,
            remark: this.edit_CS.remark
          }
          updateEquity(params).then(response => {
            if (response.status == 'SUCCESS') {
              this.msgSuccess('修改成功')
              this.editBizRi(this.edit_CS)
            }
          })
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    // 获取修改权益数据
    editBizRi(row) {
      const that = this
      let arr = [],grade = []
      let newArr = [];
      this.ServiceList = []
      this.serviceData = []
      this.equityList = []
      this.edit_CS = {}
      this.servicelistQuery2.serviceName = null
      this.editRightsFormVisible = true
      getEquityByID({equityID: row.equityID}).then(response => {
        this.edit_CS = response
        if (this.edit_CS&&this.edit_CS.equityLevelDef) {
          this.edit_CS.equityLevelDef.sort((a, b) => {
            return (a['equityLevel'])-(b['equityLevel'])   // grapheme为字母对应的属性名
          })
          this.equityList = JSON.parse(JSON.stringify(this.edit_CS.equityLevelDef))
        }
        this.edit_CS.equityLevelDef.forEach((item) => {
          let obj = {
            name: item.equityLevelName,
            id: item.equityLevelID,
            checked: false
          }
          item.serviceLevelDef.forEach((item2) => {
            obj.checked = true
            item2['grade'] = [obj]
            item2['obj'] = obj
            arr.push(item2)
          })
        })
        arr.forEach(el=>{
          const result = newArr.findIndex(ol=>{return el.serviceID === ol.serviceID})
          if(result!== -1){
            newArr[result].grade.push(el.obj)
          }else{
            newArr.push(el)
          } 
        })
        
        newArr.forEach(item3 => {
          let wrapLen = this.edit_CS.equityLevelDef.length
          let itemLen = item3.grade.length
          if (itemLen !== wrapLen) {
            for (let i = 0;i < this.edit_CS.equityLevelDef.length;i++) {
              for (let j = 0;j < item3.grade.length;j++) {
                if (this.edit_CS.equityLevelDef[i].equityLevelID == item3.grade[j].equityLevelID) {
                  break;
                }else{
                  let obj = {
                    equityLevelName: this.edit_CS.equityLevelDef[i].equityLevelName,
                    equityLevelID: this.edit_CS.equityLevelDef[i].equityLevelID,
                    equityLevel: this.edit_CS.equityLevelDef[i].equityLevel,
                    checked: false
                  }
                  item3.grade.push(obj)
                }
              }
            }
          }
          item3.grade.sort((a, b) => {
            return (a['equityLevel'])-(b['equityLevel'])
          })
        })
        this.ServiceList = newArr
        this.serviceData = newArr
      })
    },
    // 删除权益
    deleteBizRi(row) {
      this.$confirm('确定删除?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
          .then(() => {
            deleteEquity({equityID: row.equityID}).then(response => {
              console.log(response)
              this.msgSuccess('删除成功')
              this.reset()
              this.getList()
            })
          })
          .catch(() => void 0)
    },
    // 关闭
    handleCloseRights() {
      this.addRightsFormVisible = false
      this.addGradeFormVisible = false
      this.addServiceFormVisible = false
      this.editRightsFormVisible = false
      this.reset()
      this.getList()
    },

    close() {
      this.addRightsFormVisible = false
      this.addGradeFormVisible = false
      this.addServiceFormVisible = false
      this.editRightsFormVisible = false
      this.reset()
      this.getList()
    }
  }
}
</script>
<style lang="scss" scoped>
::v-deep{
  .el-table thead{
    color: #888888;
    font-size: 13px;
  }
  .el-table tr{
    color: #888888;
    font-size: 13px;
  }
  .el-table--medium th{
    padding: 8px 0;
  }
  .el-table--medium td{
    padding: 8px 0;
  }
  .btn1{
    color: #37A8AF;
    font-size: 13px;
  }
  .el-table--striped .el-table__body tr.el-table__row--striped td{
    background: #f3f4f5;
  }
  .el-pagination{
    padding: 0;
    margin-right: -4px;
  }
  .pagination-container{
    padding: 0;
    margin: 0;
  }
  .el-dialog__header{
    display: none;
  }
  .el-dialog__body{
    padding: 25px 30px 20px;
    font-size: 13px;
    color: #888888;
  }
  .modal-body{
    padding: 20px;
  }
  .edit-grade-list{
    /deep/.el-table th.is-leaf, .el-table td{
      border: 0;
    }
  }
  .el-dialog{
    width: 960px;
    margin-top: 10vh !important;
  }
  .el-form-item{
    margin-bottom: 15px;
  }
  .el-input__inner{
    color: #555555;
    border: 1px solid #cccccc;
  }
  .el-select{
    width: 100%;
  }
}
/deep/ .el-table::before{
  width: 0;
}
/deep/.el-form-item__error{
  padding-top: 1px;
}
.demo-form-inline{
  padding: 40px 0 0 35px;
}
.box{
  margin-bottom: 0;
}
.box-body{
  padding-top: 0;
}
.btn-default{
  margin-right: 10px;
}
.attribute-operation{
  padding-top: 15px;
}
.attribute-operation2{
  color: #37A8AF;
  .el-button--text{
    color: #37A8AF;
  }
}
.attribute-operation3{
  padding-top: 0;
}
</style>
